<template>
    <div class="index clearafter">
        <module-head></module-head>
        <div class="content flex">
            <div class="w220">
                <menu-list></menu-list>
            </div>
            <div class="w980 flex_full">
                <p class="flex flex_vcenter pdb20">
                  <i class="titleTag"></i>
                  <span class="fRedBig">定期回访查询</span>
                </p>
                <div class="bs-example-modal-lg">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="paientinfo testlist">
                                    <table>
                                        <tr>
                                            <th colspan="4">
                                                开始时间：
                                                <input type="text" id="start" v-model="param.startDate"> 结束时间：
                                                <input type="text" id="end" v-model="param.endDate">
                                                <button class="normalBtn" id="searchselftest" @click="queryRevisit">搜索</button>
                                            </th>
                                        </tr>
                                        <template v-for="item in revisitlist">
                                            <tr class="noborder">
                                                <td>
                                                    <p><span class="name">{{item.personName}}</span><span>{{item.personSexText}}</span><span>{{item.personAge}}岁</span></p>
                                                </td>
                                                <td>
                                                    <p class="text-right">回访日期：{{item.revisitTime.substr(0,10)}}</p>
                                                </td>
                                            </tr>
                                            <tr>
                                            <td colspan="2"><p class="grey">{{item.revisitRecord}}</p></td>
                                            </tr>
                                        </template>
                                        <tr>
                                            <td colspan="2">
                                                <div class="pull-left">
                                                    <button class="secondBtn" @click="refresh">刷新</button>
                                                </div>
                                                <div class="pull-right">
                                                    <boot-page v-ref:page :async="true" :lens="lenArr" :page-len="pageLen" :headersparam="headersparam" :param="param"></boot-page>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
import 'assets/lib/laydate/laydate.js'
import 'assets/lib/laydate/need/laydate.css'
import 'assets/lib/laydate/skins/danlan/laydate.css'
import 'assets/reset.css'
import Public from 'assets/public.js'
import bootPage from 'components/BootPage.vue'
import moduleHead from 'components/module-head'
import menuList from 'components/menu-list'
module.exports = {
    data() {
            return {

                lenArr: [10, 20, 50], // 每页显示长度设置
                pageLen: 5, // 可显示的分页数
                headersparam: {
                    "X-Service-Id": "coms.revisitService",
                    "X-Service-Method": "queryRevisit",
                },
                param: {
                    firstRequest: "1", //进入列表页面的请求的标识，区别搜索的的请求
                    endDate: "",
                    startDate: "",
                }, // 传递参数,
                revisitlist: [],

            }
        },
        components: {
            bootPage, moduleHead, menuList
        },
        ready() {
            var that = this;
            this.param.endDate = Public.formatDate();
            this.param.startDate = Public.formatDate();

            // 日历插件
            laydate({
                elem: '#start',
                fixed: true,
                max: laydate.now(),
                // min: laydate.now(-30),
                istoday: false,
                choose: function(datas) { //选择日期完毕的回调
                    that.param.startDate = datas
                }
            });
            // 日历插件
            laydate({
                elem: '#end',
                fixed: true,
                max: laydate.now(),
                // min: laydate.now(-30),
                istoday: false,
                choose: function(datas) { //选择日期完毕的回调
                    that.param.endDate = datas
                }
            });

        },
        methods: {

                //根据起始时间和结束时间搜索健康列表
                queryRevisit() {
                    this.param.firstRequest="0";
                    this.refresh();
                },
                refresh() {
                    this.$refs.page.refresh()
                },

        },
        events: {
            // 分页组件传回的表格数据
            'data' (data) {
                // $.each(data, function(index, el) {
                //     el.isshowchart = el.itemList.some(item =>
                //         item.indexType == "01"
                //     )
                // });
                this.revisitlist = data;

            }
        },
}
</script>
<style scoped>
.modal-dialog{margin:0;}
.paientinfo {
    padding-bottom: 20px;
    border-bottom: 1px dashed #EFEFEF;
    width: 90%;
    margin: 20px auto;
}

.paientinfo table {
    width: 100%;
}

.paientinfo table td p span {
    display: inline-block;
    margin-left: 10px;
    height: 20px;
}
.paientinfo table td .name {
    font-weight: 700;
}
.paientinfo table td .grey {
    color: #999;padding: 0 20px;
}



.testlist {
    width: 90%;
    border-bottom: none;
    min-height: 500px;
    background: #fff;
}

.testlist tr {
    border-bottom: 1px dashed #EFEFEF;
    padding: 15px 0
}
.testlist tr.noborder{border-bottom: none}
.testlist tr th {
    padding: 0 0 20px;
    font-weight: normal;
}

.testlist tr td {
    padding: 15px 0
}


.testlist input {
    border: 1px solid #EFEFEF;
    margin: 0 20px 0 10px;
    padding: 3px 10px 3px 10px
}

#searchselftest {
    display: inline-block;
}
.w80 {
    width: 80px
}
</style>
